<template>
  <Modal v-model="show" class="modal-collector" title="我的信息" width=400>
        <formControl ref="form" :model="model"  @validate="validateChange" v-model="data" ></formControl>
        <div slot="footer" class="button-panel-button">
            <i-button @click="close">取消</i-button>
            <i-button @click="formSubmit" :disabled="!enableSubmit" type="primary">确认</i-button>
        </div>
  </Modal>
</template>
<script>
import $ from "@/common/index";
import formControl from "@/components/form";
export default {
  props: {
    value: {}
  },
  data() {
    return {
      submitPath: "service/{app}/collector/self_service",
      findPath: "service/{app}/collector/profile",
      show: false,
      enableSubmit: true,
      model: {
        fields: [
          {
            code: "employee_code",
            name: "员工编号"
          },
          {
            code: "mobile",
            name: "手机号"
          },
          {
            code: "email",
            name: "邮箱",
            rangeset: {
              type: "email"
            }
          }
        ]
      },
      data: {}
    };
  },
  watch: {
    value(v) {
      this.show = v;
      if (v) {
        $.link(this.findPath).then(res => {
          this.$refs.form && this.$refs.form.setData(res.data);
        });
      }
    },
    show(v) {
      this.$emit("input", v);
    }
  },
  methods: {
    formSubmit() {
      this.$refs.form.doValidate();
      this.$nextTick(() => {
        if (!this.enableSubmit) {
          this.$Message.error("表单验证失败!");
        } else {
          this.submit();
        }
        this.isValidate = true;
      });
    },
    submit() {
      var data = this.$refs.form.getData
        ? this.$refs.form.getData()
        : this.$refs.form.formData;
      $.link(this.submitPath, data).then(() => {
        this.close();
      });
    },
    validateChange(v) {
      this.enableSubmit = v;
    },
    close() {
      this.show = false;
    }
  },
  components: {
    formControl
  }
};
</script>

<style lang="less">
.modal-collector {
  .field-control {
    margin-bottom: 16px;
    &.field-control-error {
      margin-bottom: 22px;
    }
  }
}
</style>
